<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <input type="text" placeholder="用户名" v-model="username"><br>
            <input type="password" placeholder="密码" v-model="password"><br>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select><br>
            <input type="checkbox" v-model="language" value="java"/>java
            <input type="checkbox" v-model="language" value="c"/>c
            <input type="checkbox" v-model="language" value="Go"/>Go<br>
            <input type="submit" value="提交" @click="login()">
        </div>
        <!--导包一定要双标签，不能单标签-->
        <script src="./node_modules/vue/dist/vue.js"></script>

        <script type="text/javascript">

            var vue = new Vue({
                el:"#app",
                data:{
                    username:"",
                    password:"",
                    sex:"",
                    language:[]

                },
                methods:{
                    login() {
                        console.log(this.username,this.password,this.sex,this.language)
                    }
                }
            })
        </script>
    </body>
<!--    1、 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型-->
<!--    2、 radio ：单选按钮，对应的值是input的value值-->
<!--    3、 input 和textarea 默认对应的model是字符串-->
<!--    4、 select：单选框，单选对应字符串，多选对应也是数组-->

</html>